Page({
  onShow() {
    wx.reportAnalytics('enter_home_programmatically', {})

    // http://tapd.oa.com/miniprogram_experiment/prong/stories/view/1020425689866413543
    if (wx.canIUse('getExptInfoSync')) {
      console.log('getExptInfoSync expt_args_1', wx.getExptInfoSync(['expt_args_1']))
      console.log('getExptInfoSync expt_args_2', wx.getExptInfoSync(['expt_args_2']))
      console.log('getExptInfoSync expt_args_3', wx.getExptInfoSync(['expt_args_3']))
    }
    if (wx.canIUse('reportEvent')) {
      wx.reportEvent('expt_event_1', {expt_data: 1})
      wx.reportEvent('expt_event_2', {expt_data: 5})
      wx.reportEvent('expt_event_3', {expt_data: 9})
      wx.reportEvent('expt_event_4', {expt_data: 200})

      wx.reportEvent('weexpt_event_key_1', {option_1: 1, option_2: 10, option_str_1: 'abc'})
      wx.reportEvent('weexpt_event_key_1', {option_1: 'abc', option_2: '1000', option_str_1: '1'})
    }
  },
  onShareAppMessage() {
    return {
      title: '小程序官方组件展示',
      path: 'page/component/index'
    }
  },
  onShareTimeline() {
    '小程序官方组件展示'
  },

  data: {
    list: [
      {
        id: 'chenyue-1',
        icon: 'view',
        name: '视图容器',
        open: false,
        pages: [
          {
            zh: 'cover-image',
            title: '覆盖在原生组件之上的图片视图',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            remark: '可覆盖的原生组件同cover-view，支持嵌套在cover-view里；目前原生组件均已支持同层渲染，建议使用 image 替代',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html'
          },
          {
            zh: 'cover-view',
            title: '覆盖在原生组件之上的文本视图',
            remark: '可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html'
          },
          {
            zh: 'match-media',
            title: 'media query 匹配检测节点',
            remark: 'media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。',
            url: '/packageComponent/pages/view/match-media/match-media',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html'
          },
          {
            zh: 'movable-area',
            title: 'movable-view的可移动区域',
            remark: '',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html'
          },
          {
            zh: 'movable-view',
            title: '可移动的视图容器',
            remark: '可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html'
          },
          {
            zh: 'page-container',
            title: '页面容器',
            remark: '小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/page-container.html'
          },
          {
            zh: 'root-portal',
            title: '使整个子树从页面中脱离出来',
            remark: '使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html'
          },
          {
            zh: 'scroll-view',
            title: '可滚动视图区域',
            remark: `可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
            1、横向滚动需打开 enable-flex 以兼容 WebView，如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>
            2、滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确
            3、使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。`,
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html'
          },
          {
            zh: 'swiper',
            title: '滑块视图容器',
            remark: '滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html'
          },
          {
            zh: 'swiper-item',
            title: '仅可放置在swiper组件中，宽高自动设置为100%',
            remark: '仅可放置在swiper组件中，宽高自动设置为100%',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html'
          },
          {
            zh: 'view',
            title: '视图容器',
            remark: '',
            url: '/packageComponent/pages/view/viewPages/viewPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/view.html'
          },
        ]
      },
      {
        id: '2',
        icon: 'content',
        name: '基础内容',
        open: false,
        pages: [
          {
            zh: 'text',
            title: '文本组件',
            remark: '文本\n内联文本只能用 text 组件，不能用 view，如 <text> foo <text>bar</text> </text>\n新增 span 组件用于内联文本和图片，如 <span> <image> </image> <text>bar</text> </span>',
            url: '/packageComponent/pages/content/text/text',
            progress: 100,
            webUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/text.html'
          },
          {
            zh: 'icon',
            title: '图标组件',
            remark: '图标组件',
            url: '/packageComponent/pages/content/icon/icon',
            progress: 100,
            webUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/icon.html'
          },
          {
            zh: 'progress',
            title: '进度条组件',
            remark: '进度条,skyline暂不支持,鸿蒙端disable-context-menu属性无法生效',
            url: '/packageComponent/pages/content/progress/progress',
            progress: 100,
            webUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/progress.html'
          },
          {
            zh: 'rich-text',
            title: '富文本组件',
            remark: '富文本',
            url: '/packageComponent/pages/content/rich-text/rich-text',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'selection',
            title: '局部文本选区',
            remark: '局部文本选区,skyline暂不支持',
            url: '/packageComponent/pages/content/selection/selection',
            progress: 100,
            docUrl: ''
          },
        ]
      },
      {
        id: '3',
        icon: 'form',
        name: '表单组件',
        open: false,
        pages: [
          {
            zh: 'button',
            title: '按钮',
            remark: '按钮',
            url: '/packageComponent/pages/form/button/button',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'open-type',
            title: '微信开放能力',
            remark: '微信开放能力，根据button组件open-type属性值，触发不同效果',
            url: '/packageComponent/pages/form/button_openType/open-type',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'checkbox',
            title: '多选框',
            remark: '多选项目',
            url: '/packageComponent/pages/form/checkbox/checkbox',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'form',
            title: '表单',
            remark: '表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key',
            url: '/packageComponent/pages/form/form/form',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'input',
            title: '输入框',
            remark: '输入框',
            url: '/packageComponent/pages/form/input/input',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'keyboard-accessory',
            title: 'keyboard-accessory',
            remark: '设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图',
            url: '/packageComponent/pages/form/keyboard-accessory/keyboard-accessory',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'label',
            title: '标签组件',
            remark: '用来改进表单组件的可用性。使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch, input',
            url: '/packageComponent/pages/form/label/label',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'picker',
            title: '选择器',
            remark: '从底部弹起的滚动选择器，鸿蒙暂不支持省市区选择器',
            url: '/packageComponent/pages/form/picker/picker',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'picker-view',
            title: '滚动选择器',
            remark: '嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示',
            url: '/packageComponent/pages/form/picker-view/picker-view',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'picker-view-column',
            title: '滚动选择器子项',
            remark: '滚动选择器子项。仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致',
            url: '/packageComponent/pages/form/picker-view/picker-view',
            progress: 100,
            docUrl: ''
          },
          {
            zh: 'radio',
            title: '单选项目',
            remark: '单选项目',
            url: '/packageComponent/pages/form/radio/radio',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/radio.html'
          },
          {
            zh: 'radio-group',
            title: '单选项目',
            remark: '单项选择器，内部由多个 radio 组成',
            url: '/packageComponent/pages/form/radio/radio',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/radio-group.html'
          },
          {
            zh: 'slider',
            title: '滑动选择器',
            remark: '滑动选择器',
            url: '/packageComponent/pages/form/slider/slider',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/slider.html'
          },
          {
            zh: 'switch',
            title: '',
            remark: '',
            url: '/packageComponent/pages/form/switch/switch',
            progress: 0,
            docUrl: ''
          },
          {
            zh: 'textarea',
            title: '',
            remark: '',
            url: '/packageComponent/pages/form/textarea/textarea',
            progress: 0,
            docUrl: ''
          },
          {
            zh: 'editor',
            title: '富文本编辑器',
            remark: '富文本编辑器，可以对图片、文字进行编辑',
            url: '/packageComponent/pages/form/editor/editor',
            progress: 100,
            docUrl: ''
          },
        ]
      },
      {
        id: 'chenyue-2',
        icon: 'nav',
        name: '手势系统',
        open: false,
        pages: [
          {
            zh: 'double-tap-gesture-handler',
            title: '双击时触发手势',
            remark: '',
            url: '/packageComponent/pages/gesturesystem/gesturesystemPages/gesturesystemPages',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/double-tap-gesture-handler.html'
          },
        ]
      },
      {
        id: '4',
        icon: 'nav',
        name: '导航',
        open: false,
        pages: [
          {
            zh: 'navigator',
            title: '页面链接',
            remark: `1、navigator 在 Skyline 下视为文本节点，只能嵌套文本节点（如 text），不能嵌套 view、button 等普通节点，如 <button> <navigator>foo</navigator> </button>
            2、新增 span 组件用于内联文本和图片，如 <span> <image> </image> <navigator>bar</navigator> </span>
            `,
            url: '/packageComponent/pages/nav/navigator/navigatorPage',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html'
          },
        ]
      },
      {
        id: '5',
        icon: 'media',
        name: '媒体组件',
        open: false,
        pages: [
          {
            zh: 'image',
            title: '图片组件',
            remark: '图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。',
            url: '/packageComponent/pages/media/image/image',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/image.html'
          },
          {
            zh: 'audio',
            title: '音频',
            remark: '',
            url: '/packageComponent/pages/media/mediaPage/mediaPage',
            progress: 100,
            docUrl: 'https://developers.weixin.qq.com/miniprogram/dev/component/audio.html'
          },
          {
            zh: 'video',
            title: '',
            remark: '',
            url: '/packageComponent/pages/media/video/video',
            progress: 0,
            docUrl: ''
          },
          {
            zh: 'camera',
            title: '',
            remark: '',
            url: '/packageComponent/pages/media/camera/camera',
            progress: 0,
            docUrl: ''
          },
          {
            zh: 'live-pusher',
            title: '',
            remark: '',
            url: '/packageComponent/pages/media/live-pusher/live-pusher',
            progress: 0,
            docUrl: ''
          },
          {
            zh: 'live-player',
            title: '',
            remark: '',
            url: '/packageComponent/pages/media/live-player/live-player',
            progress: 0,
            docUrl: ''
          },
        ]
      },
      {
        id: '6',
        icon: 'map',
        name: '地图',
        open: false,
        pages: [
          {
            zh: 'map',
            title: '',
            remark: '',
            url: '/packageComponent/pages/map/map/map',
            progress: 0,
            docUrl: ''
          },
        ]
      },
      {
        id: '7',
        icon: 'canvas',
        name: '画布',
        open: false,
        pages: [
          {
            zh: 'canvas-2d',
            title: '',
            remark: '',
            url: '/packageComponent/pages/canvas/canvas-2d/canvas-2d',
            progress: 0,
            docUrl: ''
          },
          {
            zh: 'webgl',
            title: '',
            remark: '',
            url: '/packageComponent/pages/canvas/webgl/webgl',
            progress: 0,
            docUrl: ''
          },
        ]
      },
      {
        id: '8',
        icon: 'open',
        name: '开放能力',
        open: false,
        pages: [
          {
            zh: 'ad',
            title: '',
            remark: '',
            url: '/packageComponent/pages/open/ad/ad',
            progress: 0,
            docUrl: ''
          },
          {
            zh: 'open-data',
            title: '',
            remark: '',
            url: '/packageComponent/pages/open/open-data/open-data',
            progress: 0,
            docUrl: ''
          },
          {
            zh: 'web-view',
            title: '',
            remark: '',
            url: '/packageComponent/pages/open/web-view/web-view',
            progress: 0,
            docUrl: ''
          },
        ]
      },
      {
        id: '9',
        icon: 'obstacle-free',
        name: '无障碍访问',
        open: false,
        pages: [
          {
            zh: 'aria-component',
            title: '',
            remark: '',
            url: '/packageComponent/pages/obstacle-free/aria-component/aria-component',
            progress: 0,
            docUrl: ''
          },
        ]
      }
    ],
    theme: 'light'
  },

  onLoad() {
    this.setData({
      theme: wx.getSystemInfoSync().theme || 'light'
    })

    if (wx.onThemeChange) {
      wx.onThemeChange(({theme}) => {
        this.setData({theme})
      })
    }
  },

  kindToggle(e) {
    const id = e.currentTarget.id
    const list = this.data.list
    for (let i = 0, len = list.length; i < len; ++i) {
      if (list[i].id === id) {
        list[i].open = !list[i].open
      } else {
        list[i].open = false
      }
    }
    this.setData({
      list
    })
    wx.reportAnalytics('click_view_programmatically', {})
  }
})
